<!--
 * @Descripttion: 
 * @version: 0.0
 * @Author: JunyaoPan
 * @Date: 2021-01-03 11:41:07
 * @LastEditors: sueRimn
 * @LastEditTime: 2021-08-02 19:46:36
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>四列布局</title>
    <link rel="stylesheet" href="../common.css">
</head>
<style>
    /* 背景 */
    .back {
        height: 738px;
        background-color: #f4f0ea;
        padding: 60px 0;
    }
    /* 居中显示 */
    .center {
        width: 1090px;
        height: 570px;
        margin: 0 auto;
    }
    /* 左侧内容 */
    .left {
        width: 390px;
        height: 570px;
        background-color: teal;
        float: left;
    }
    /* 右侧内容 */
    .right {
        width: 690px;
        height: 570px;
        float: right;
    }
    .right ul li {
        width: 223px;
        height: 280px;
        background-color: lightblue;
        float: left;
        margin-right: 10px;
        margin-bottom: 10px;
    }
    /* 选中第三个和第六个li，将margin设置为0 */
    .right ul li:nth-child(3),
    .right ul li:nth-child(6) {
        margin: 0;
    }
    /* 选中第四个和第五个li，将margin-bottom设置为0 */
    .right ul li:nth-child(4),
    .right ul li:nth-child(5) {
        margin-bottom: 0;
    }

</style>
<body>
    <div class="back">
        <div class="center">
            <div class="left"></div>
            <div class="right">
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>